
@permissions-options-avatar-size: 4.4rem;
@permissions-people-list-item-avatar-size: 2.2rem;
@permissions-people-list-item-padding: 1rem;
@permissions-people-list-item-height: @permissions-people-list-item-avatar-size + (2 * @permissions-people-list-item-padding);
@permissions-people-list-remove-button-width: 5rem;

@subuded-text-color: fade(@trpDarkGrey, 60%);



.permissions-add-admin-description {
  margin-top: .5em;
  margin-bottom: 0;

  color: @subuded-text-color;
}

.permissions-people-input {
  /* Reset forms.less :( */
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 2em;
  padding-left: @permissions-people-list-item-padding;
  padding-right: @permissions-people-list-item-padding;
}

.permissions-extra-admins-note {
  margin-top: 0;
  margin-bottom: .5em;
}

.permissions-admin-list-wrapper {
  overflow: auto;
  max-height: 5 * @permissions-people-list-item-height;
  margin-top: .5em;
  margin-bottom: 1em;

  border: 1px solid @trpLightGrey;

  @media (max-height: 800px) {
    max-height: 4 * @permissions-people-list-item-height;
  }

  @media (max-height: 700px) {
    max-height: 3 * @permissions-people-list-item-height;
  }
}

.permissions-admin-list-root {

}

.permissions-people-list-wrapper {

}

.permissions-people-list {
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.permissions-people-list-item {
  display: flex;
  align-items: center;

  padding: @permissions-people-list-item-padding;

  transition: background-color .2s ease;

  &:nth-child(even) {
    background-color: rgba(0, 0, 0, .05);
  }

  &:hover,
  &:focus {
    background-color: rgba(0, 0, 0, .025);
  }
}

.permissions-people-list-item-avatar {
  width: @permissions-people-list-item-avatar-size;
  margin-right: 1rem;
  border-radius: 2px;
}

.permissions-people-list-item-name {
  flex: 1;
}

.permissions-people-list-item-display-name {
  margin-right: .75em;
}

.permissions-people-list-item-username {
  color: @subuded-text-color;
}

.permissions-people-list-item-remove-button {
  width: @permissions-people-list-remove-button-width;
  background-color: transparent;
  border: 0;
}


.permissions-admin-list-permission-options-wrapper {
  display: flex;
  align-items: center;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.permissions-admin-list-permission-options-avatar {
  width: @permissions-options-avatar-size;
  margin-right: 1rem;
  border-radius: 4px;
}

.permissions-admin-list-permission-options-select {
  width: 100%;
  height: 2em;
  margin-top: 0;
  margin-bottom: 0;

  font-size: inherit;
}

.permissions-admin-list-permission-options-spinner {
  display: inline-block;

  animation-name: permissions-options-spinner-rotate;
  animation-duration: .75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.permissions-admin-list-permission-options-error-icon {
  display: inline-block;

  animation-name: permissions-options-error-flash;
  animation-duration: .75s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

.permissions-admin-list-permission-options-github-icon {
  display: inline-block;
}

.permissions-admin-list-permission-options-gitter-icon {
  display: inline-block;
  width: 14px;
  fill: currentColor;
}

@keyframes permissions-options-spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes permissions-options-error-flash {
  from {
    color: @trpDarkGrey;
  }
  to {
    opacity: fade(@trpDarkGrey, 50%);
  }
}

.permissions-admin-list-permission-options-status-wrapper {
  width: @permissions-people-list-remove-button-width;
  text-align: center;
  font-size: 1.2em;
}


.permissions-error-section {
  margin-top: 1.5em;
}

.permission-error {
  margin-top: 1em;
  color: @ruby;
}
